<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>html5webDB.html</title>
<script>
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;

//1st
html5rocks.webdb.open = function() {
  var dbSize = 5 * 1024 * 1024; // 5MB
  html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
}

//3st
html5rocks.webdb.createTable = function() {
  var db = html5rocks.webdb.db;
  //   Transaction tx=db.transaction():
  //   tx.executeSql("create TAbe.."); 
  db.transaction(function(tx) {
    tx.executeSql("CREATE TABLE IF NOT EXISTS todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", 
    			[]);
  });
}

html5rocks.webdb.addTodo = function(todoText) {
  var db = html5rocks.webdb.db;
  db.transaction(function(tx){
    var addedOn = new Date();
    tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
        [todoText, addedOn],
        html5rocks.webdb.onSuccess,
        html5rocks.webdb.onError);
   });
}

html5rocks.webdb.onError = function(tx, e) {
  alert("There has been an error: " + e.message);
}
//2th db오픈에 성공하면 실행되도록 셋팅해둠 
html5rocks.webdb.onSuccess = function(tx, r) {
  // re-render the data.
  //getAllTodoItems펑션이 실행되고, 성공하면 
  //loadTodoItems 펑션이 실행된다 .  
  html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

//4th
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
  var db = html5rocks.webdb.db;
  db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM todo", [], renderFunc,
        html5rocks.webdb.onError);
  });
}
html5rocks.webdb.deleteTodo = function(id) {
  var db = html5rocks.webdb.db;
  db.transaction(function(tx){
    tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
        html5rocks.webdb.onSuccess,
        html5rocks.webdb.onError);
    });
}

//5th select 성공시 
function loadTodoItems(tx, rs) {
  var rowOutput = "";
  var todoItems = document.getElementById("todoItems");
  for (var i=0; i < rs.rows.length; i++) {
    rowOutput += renderTodo(rs.rows.item(i));
  }
  //7th 화면에 데이터가 보인다
  todoItems.innerHTML = rowOutput; 
}

//6th rs에 있는 데이터를 html형식으로 rendering  
function renderTodo(row) {
  return "<li>" + row.todo  + " [<a href='javascript:void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a>]</li>";
}

function init() {
  html5rocks.webdb.open();
  html5rocks.webdb.createTable();
  html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

function addTodo() {
  var todo = document.getElementById("todo");
  html5rocks.webdb.addTodo(todo.value);
  todo.value = "";}</script>    
<style>
body {
	color: #222;
	font: 14px Arial;
}

body a {
	color: #3D5C9D;
	text-decoration: none;
}
​</style>
</head>
<body onload="init()"> 
	<h1>html5webDB.html</h1>
	<ul id="todoItems">
	</ul>
	<form type="post" onsubmit="addTodo(); return false;">
		<input type="text" id="todo" name="todo"
			placeholder="What do you need to do?" style="width: 200px;" /> <input
			type="submit" value="Add Todo Item" />
	</form>
	<ol>
		<li>Opening the database</li>
		<li>Creating a table</li>
		<li>Adding data to a table</li>
		<li>Selecting data from a table</li>
		<li>Rendering data from a table</li>
		<li>Deleting data from a table</li>
		<li>Hooking it all up</li>
	</ol>
</body>
</html>